<template>
  <div>
    <div class="shu-div">
      <div>
        <span class="shu-span-1">xGD799787424</span>
        <span class="shu-span-2">
          <van-icon name="setting-o"
                    slot="right"
                    color="black"
                    size="23px" /></span>
        <span class="shu-span-3">
          <van-icon name="manager-o"
                    slot="right"
                    color="black"
                    size="23px" /></span>
      </div>

      <div style="margin-top:15px;">
        <ul>
          <li style="width:40px; margin-left: 35px; float:left;">
            <van-icon name="star-o"
                      size="30px" />
            <span style="font-size:13px;">收藏</span>
          </li>
          <li style="width:40px; margin-left: 35px; float:left;">
            <van-icon name="records"
                      size="30px" />
            <span style="font-size:13px;">评价</span>
          </li>
          <li style="width:60px; margin-left: 35px; float:left; text-align:center;">
            <van-icon name="idcard"
                      size="30px" />
            <p style="font-size:13px;">红包/卡券</p>
          </li>
          <li style="width:40px; margin-left: 40px; float:left;">
            <van-icon name="other-pay"
                      size="30px"
                      dot />
            <span style="font-size:13px;">消息</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="shu-div3">
      <van-cell title="我的钱包"
                is-link
                value="进入钱包" />
      <ul style="height:80px;">
        <li>
          <div style="width:100px; float:left; margin-left:20px;">
            <span style="font-size:20px;">4000</span><br />
            <span style="font-size:15px;">借钱</span><br />
            <p style="font-size:10px; color:#A2A2A2;">最高额度(元)</p>
          </div>
        </li>
        <li>
          <div style="width:70px; float:left; margin-left:15px;">
            <span style="font-size:20px;">10万 </span>
            <p style="font-size:14px;">美团信用卡</p>
            <p style="font-size:10px; color:#A2A2A2;">最高额度(元)</p>
          </div>
        </li>
        <li>
          <div style="width:90px; float:left; margin-left:40px;">
            <span style="font-size:20px;">165元</span>
            <p style="font-size:14px;">美食享优惠</p>
            <p style="font-size:10px; color:#A2A2A2;">最高随机数</p>
          </div>
        </li>
      </ul>
      <div>
        <img style="width:100%; height:80px; "
             src="../../assets/857F1AEE-06B1-429B-B5C1-53A7AC0E762B.png"
             alt="">
      </div>
      <div>
        <p style="font-weight:bold">推荐工具</p>
        <van-grid>
          <van-grid-item icon="point-gift-o"
                         text="邀请有礼" />
          <van-grid-item icon="gold-coin-o"
                         text="手机充值" />
          <van-grid-item icon="logistics"
                         text="火车票/机票" />
          <van-grid-item icon="desktop-o"
                         text="袋鼠快跑" />
          <van-grid-item icon="coupon-o"
                         text="推荐办卡" />
          <van-grid-item icon="bulb-o"
                         text="墨迹天气" />
          <van-grid-item icon="vip-card-o"
                         text="会员中心" />
          <van-grid-item icon="user-o"
                         text="免流用美团" />
          <van-grid-item icon="comment-o"
                         text="发票助手" />
          <van-grid-item icon="gem-o"
                         text="我要合作" />
          <van-grid-item icon="flower-o"
                         text="美团大学" />
        </van-grid>
      </div>
    </div>

  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.shu-div {
  width: 100%;
  height: 150px;
  background: #f7cd46;
}
.shu-div3 {
  width: 360px;
  height: 500px;
  border-radius: 20px;
  background: white;
  margin-top: -20px;
}
.shu-span-1 {
  width: 20px;
  margin-left: 110px;
}
.shu-span-2 {
  width: 20px;
  margin-left: 50px;
}
.shu-span-3 {
  width: 20px;
  margin-left: 20px;
}
.shu-span-4 {
  width: 20px;
}
.shu-span-5 {
  width: 20px;
  margin-left: 45px;
}
.shu-span-6 {
  width: 20px;
  margin-left: 45px;
}
.shu-span-7 {
  width: 20px;
  margin-left: 55px;
}
.shu-p-1 {
  width: 40px;
  height: 30px;
  border: 1px solid red;
  margin-left: 40px;
  float: left;
}
</style>